<template>
	<view :class="[posterImageStatus ? 'noscroll product-con' : 'product-con']" v-if="domStatus">
		<!-- 商品轮播 -->
		<product-con-swiper :imgUrls="imgUrls"></product-con-swiper>
		<!-- 商品信息描述 -->
		<view class="wrapper">
			<view class="share acea-row row-between row-bottom">
				<view class="title">
					推{{ people == 1? '一' :people == 2? '二' :people == 3? '三' :people == 4? '四' :people == 5? '五' :people == 6? '六' : '七' }}返一限时福利来袭
				</view>
				<view class="money">
					￥
					<text class="num" v-text="storeInfo.price"></text>
				</view>
				<view class="countDown" v-if="whether_buy != 'A'">
					<text class="timeName">距离结束还剩</text>
					<count-down :isDay="true" :dayText="' : '" :hourText="' : '" :minuteText="' : '"
						:datatime="rebate.stopTime/1000"></count-down>
				</view>
				<view class="countDown" v-else>
					<text class="timeName font-style">活动已结束</text>
				</view>
			</view>
			<view class="introduce" v-text="storeInfo.title"></view>
			<view class="label acea-row row-between-wrapper">
				<view v-if="combinationType == 1">类型：推{{ people == 1? '一' :people == 2? '二' :people == 3? '三' :people == 4? '四' :people == 5? '五' :people == 6? '六' : '七' }}返一</view>
				<view v-text="'类型:' + storeInfo.people + '人团'" v-else></view>
				<view v-text="'库存:' + storeInfo.stock"></view>
				<view v-text="'已抢:' + pinkOkSum" v-if="pinkUser.length > 0"></view>
			</view>
		</view>
		<view class="condition" :class="whether_buy == 'Y'? '': 'noneBgColor'">
			<view class="text">
				还差 <text class="remainder">{{ remainder }}</text> 单，即可返利，已推 <text
					class="selfCount">{{ selfCount }}</text> 单，收益 <text class="totalSum">{{ totalSum }}</text>积分
			</view>
			<view class="userView">
				<view class="item userNone" v-if="whether_buy == 'N' || pinkRebate.length <= 0">
					+
				</view>
				<view class="item" v-for="(item, pinkRebateIndex) in pinkRebate" :key="pinkRebateIndex"
					v-if="pinkRebateIndex < 3">
					<image :src="item.avatar" mode=""></image>
				</view>
			</view>
			<view class="teamBnt bg-color-red" v-if="whether_buy == 'Y' && whether_share == 'N'" @click="listenerActionSheet">
				分享
			</view>
			<view class="SelfPurchase" v-if="whether_buy != 'Y'">
				自购后可享受返利
			</view>
		</view>
		<view class="condition purchasedUser" v-if="pinkUser.length > 0">
			<view class="userView">

				<view class="item" v-for="(item, pinkUserIndex) in pinkUser" :key="pinkUserIndex" v-if='pinkUserIndex < 5'>
					<image :src="item.avatar" mode=""></image>
				</view>
				<view class="item" v-if="pinkUser.length <= 0">
					<image
						src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKUV9fYnbhzd3qaWOScxRLxX3giahjdq3nXvf2EiacXAKUBYWaQiaHIyw83OXFLnLO8VqZK01KhXMOXg/132"
						mode=""></image>
				</view>
				<view class="item" v-if="pinkUser.length <= 1">
					<image
						src="https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erRbiaC6Yic0Wm1jFnDCmmAzY7zhK9oMVg0wD5nicN25micRWicfwz3q14XawOZq1OWNJdCsD72Ux7JMEQ/132"
						mode=""></image>
				</view>
				<view class="item" v-if="pinkUser.length <= 2">
					<image
						src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIIxqNLShAZLPnkibPblfLnE314E26g68XWPYNxdIqcBmZX4maftRJntVhlIXhXvBHQOe5lMtrPwAg/132"
						mode=""></image>
				</view>
				<view class="item" v-if="pinkUser.length >= 2">
					<image src="https://h5.ylsp.vip/file/static/sockicon.png" mode=""></image>
				</view>
				<view class="View-pinkOkSum">
					已抢购 {{ pinkOkSum }} 份
				</view>
			</view>
		</view>
		<!-- 推三返利规则 -->
		<view class="playWay">
			<view class="title acea-row row-between-wrapper">
				<view>推{{ people == 1? '一' :people == 2? '二' :people == 3? '三' :people == 4? '四' :people == 5? '五' :people == 6? '六' : '七' }}返利规则</view>
			</view>
			<view class="way acea-row row-middle">
				<view class="item">
					<text class="num">①</text>自购
				</view>
				<view class="iconfont icon-arrow"></view>
				<view class="item">
					<text class="num">②</text>海报分享
				</view>
				<view class="iconfont icon-arrow"></view>
				<view class="item">
					<view>
						<text class="num">③</text>三人满返
					</view>
				</view>
				<view class="explain">
					说明：自购后分享推广一人可获得{{ storeInfo.commissionSum }}积分返利，分享推广俩人可获得{{ storeInfo.commissionSum*2 }}积分返利，分享推广三人可获得{{ storeInfo.commissionSum*2-(-storeInfo.price) }}积分返利
				</view>
			</view>
		</view>
		<!-- 运费 -->
		<div class="attribute acea-row row-between-wrapper">
			<div>
				运费：
				<span class="atterTxt">{{ tempName }}</span>
			</div>
		</div>
		<!-- 规格 -->
		<view class="attribute acea-row row-between-wrapper" @click="selecAttrTap">
			<view>
				<text>{{ attrTxt }}：</text>
				<text class="atterTxt">{{ cartNum }}件</text>
			</view>
			<view class="iconfont icon-jiantou"></view>
		</view>
		<!-- 产品介绍 -->
		<view class="product-intro">
			<view class="title">产品介绍</view>
			<view class="conter" v-html="storeInfo.description"></view>
		</view>
		<!-- 操作栏 -->
		<view class="footer acea-row row-between-wrapper">
			<view class="bnt acea-row">
				<view class="buy buyback" v-if="whether_buy == 'Y'">
					<text>立即购买</text>
				</view>

				<view class="buy" @click="openTeam" v-if="whether_buy == 'N'">
					<text>立即购买</text>
				</view>
			</view>
		</view>
		<!-- 商品信息弹窗 -->
		<ProductWindow v-if="cartNum" v-on:changeFun="changeFun" :attr="attr" :cartNum="cartNum"></ProductWindow>
		<!-- 分享海报 -->
		<RebatePoster v-on:setPosterImageStatus="setPosterImageStatus" :posterImageStatus="posterImageStatus" :posterData="posterData"
		 :goodId="rebateId"></RebatePoster>
	</view>
</template>
<script>
	import ProductConSwiper from "@/components/ProductConSwiper";
	import CountDown from "@/components/CountDown_v2";
	import UserEvaluation from "@/components/UserEvaluation";
	import ProductWindow from "@/components/ProductWindow";
	import RebatePoster from "@/components/RebatePoster";
	import {
		getCombinationDetail,
		getCombinationRebateDetail
	} from "@/api/activity";
	import {
		postCartAdd
	} from "@/api/store";
	import {
		imageBase64
	} from "@/api/public";
	import {
		getCoupon,
		getCollectAdd,
		getCollectDel,
		getUserInfo
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import {
		isWeixin,
		parseQueryItem,
		handleUrlParam,
		systemPrompt
	} from "@/utils";
	const NAME = "GroupDetails";
	export default {
		name: "GroupDetails",
		components: {
			ProductConSwiper,
			CountDown,
			UserEvaluation,
			ProductWindow,
			RebatePoster
		},
		props: {},
		data: function() {
			return {
				domStatus: false,
				posterData: {
					image: "",
					title: "",
					price: "",
					code: ""
				},
				rebate: {
					stopTime: 0
				},
				whether_buy: '',
				whether_share: '',
				rebateId: '',
				remainder: 0, //还差单数
				totalSum: 0, //收益
				selfCount: 0, //已推多少单
				showModal: false, // 分享组件弹出开关
				posterImageStatus: false,
				reply: [],
				replyCount: 0,
				replyChance: 0,
				imgUrls: [],
				storeInfo: {},
				itemNew: {},
				attrTxt: "请选择",
				productValue: [],
				attrValue: "",
				swiperTip: {
					direction: "vertical",
					autoplay: {
						disableOnInteraction: false,
						delay: 2000
					},
					loop: true,
					speed: 1000,
					observer: true,
					observeParents: true
				},
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {},
				},
				cartNum: 1,
				userCollect: false,
				tempName: "全国包邮",
				pinkRebate: [],
				pinkUser: [],
				pinkOkSum: 0,
				people: 0,
				combinationType: ''
			};
		},
		watch: {
			$yroute: function(n) {
				var that = this;
				if (n.name === NAME) {
					that.mountedStart();
				}
			}
		},
		computed: mapGetters(["isLogin", "location", "userInfo"]),
		mounted: function() {
			
		},
		onShow() {
			this.rebateId = this.$yroute.query.id;
			
			if (this._route.query.id) {
				this.rebateId = this._route.query.id;
			} else {
				let url = parseQueryItem();
				if (!url) {
					url = handleUrlParam(getCurrentPageUrlWithArgs())
				}
				if (url) {
			
					var scene = decodeURIComponent(url.scene)
			
					const part = scene.split('-');
					const parts = part[0].split('=');
					const id = parts[1];
					this.rebateId = id;
				} else {
					this.rebateId = this._route.query.id;
				}
			}
			
			if (!this.$store.getters.token) {
				this.$yrouter.reLaunch({
					path: "/pages/authorization/index"
				});
			}
			this.mountedStart();
		},
		methods: {
			
			goPoster: function() {
				var that = this;
				this.$yrouter.push({
					path: "/pages/activity/RebatePoster/index",
					query: {
						id: that.rebateId,
						type: 1
					}
				});
				
			},
			openAlone: function() {
				this.$yrouter.push({
					path: "/pages/shop/GoodsCon/index",
					query: {
						id: this.storeInfo.productId
					}
				});

			},
			//收藏商品
			setCollect: function() {
				let that = this,
					id = that.storeInfo.id,
					category = "product";
				if (that.userCollect) {
					getCollectDel(id, category).then(function() {
						that.userCollect = !that.userCollect;
					});
				} else {
					getCollectAdd(id, category).then(function() {
						that.userCollect = !that.userCollect;
					});
				}
			},
			mountedStart: function() {
				var that = this;
				let id;
				if (that.$yroute.query.id) {
					id = that.$yroute.query.id;
				} else {
					id = that.rebateId;
				}
				getCombinationRebateDetail(id).then(res => {
						console.log(res.data)
						that.userCollect = res.data.userCollect;
						res.data.storeCombinationVo.storeInfo.description = res.data.storeCombinationVo.storeInfo
							.description.replace(
								/\<img/gi,
								'<img style="max-width:100%;height:auto;"'
							);
						that.rebate.stopTime = res.data.stopTime;
						that.whether_buy = res.data.whether_buy;
						that.whether_share = res.data.whether_share;
						that.remainder = res.data.remainder;
						that.totalSum = res.data.totalSum;
						that.selfCount = res.data.selfCount;
						that.pinkRebate = res.data.storeCombinationVo.pinkRebate;
						that.pinkUser = res.data.storeCombinationVo.pink;
						that.pinkOkSum = res.data.storeCombinationVo.pinkOkSum;
						that.people = res.data.storeCombinationVo.storeInfo.people;
						that.combinationType = res.data.combinationType;
						that.$set(that.attr, "productAttr", res.data.storeCombinationVo.productAttr);
						that.$set(that, "productValue", res.data.storeCombinationVo.productValue);
						that.$set(that, "storeInfo", res.data.storeCombinationVo.storeInfo);
						that.$set(that, "imgUrls", res.data.storeCombinationVo.storeInfo.sliderImageArr);
						that.$set(that, "itemNew", res.data.storeCombinationVo.pinkOkList);
						that.$set(that, "reply", [res.data.storeCombinationVo.reply]);
						that.$set(that, "replyCount", res.data.storeCombinationVo.replyCount);
						that.$set(that, "replyChance", res.data.storeCombinationVo.replyChance);
						that.$set(that, "tempName", res.data.storeCombinationVo.tempName);
						that.posterData.image = that.storeInfo.image;
						if (that.storeInfo.title.length > 30) {
							that.posterData.title = that.storeInfo.title.substring(0, 30) + "...";
						} else {
							that.posterData.title = that.storeInfo.title;
						}
						that.posterData.price = that.storeInfo.pinkPrice;
						that.posterData.code = that.storeInfo.code_base;
						that.domStatus = true;
						that.DefaultSelect();
					})
					.catch(err => {
						that.whether_buy = 'A';
						if (!this.$store.getters.token) {
							uni.showToast({
								title: '未授权登录',
								icon: "none",
								duration: 2000
							});
							return
						}
						uni.showToast({
							title: '推三返一活动已结束或产品已下架',
							icon: "none",
							duration: 2000
						});
					});
			},
			listenerActionSheet: function() {
				if(this.userInfo.spreadUid == 0 && this.userInfo.uid != 666){
					uni.showModal({
						title: '提示',
						content: '您还没有上级，暂不能使用分享海报！',
						success: function(res) {
							if (res.confirm) {
							} else if (res.cancel) {
							}
						}
					});
					return
				}
				if (isWeixin() === true) {
					this.weixinStatus = true;
				}
				this.setPosterImageStatus()
			},
			DefaultSelect: function() {
				let productAttr = this.attr.productAttr;
				let value = [];
				for (let i = 0; i < productAttr.length; i++) {
					this.$set(productAttr[i], "index", 0);
					value.push(productAttr[i].attrValueArr[0]);
				}
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.sort().join(",")];
				if (productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.title
					);
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.pinkPrice);
					this.$set(this.attr.productSelect, "stock", productSelect.pinkStock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", value.sort().join(","));
					this.$set(this, "attrTxt", "已选择");
				} else if (!productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.title
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.pinkPrice);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				} else if (!productSelect && !productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.title
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.pinkPrice);
					this.$set(this.attr.productSelect, "stock", this.storeInfo.pinkStock);
					this.$set(
						this.attr.productSelect,
						"unique",
						this.storeInfo.unique || ""
					);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},
			getImageBase64: function() {
				let that = this;
				imageBase64(this.posterData.image, that.posterData.code).then(res => {
					that.posterData.image = res.data.image;
					that.posterData.code = res.data.code;
				});
			},
			setPosterImageStatus: function() {

				this.posterImageStatus = !this.posterImageStatus;
			},
			RebateRule: function(id) {
				var that = this;
				that.$yrouter.push({
					path: "/pages/activity/RebateRule/index",
					query: {
						id
					}
				});
			},
			goReply: function() {
				var that = this;
				that.$yrouter.push({
					path: "/pages/shop/EvaluateList/index",
					query: {
						id: that.storeInfo.product_id
					}
				});
			},

			//将父级向子集多次传送的函数合二为一；
			changeFun: function(opt) {
				if (typeof opt !== "object") opt = {};
				let action = opt.action || "";
				let value = opt.value === undefined ? "" : opt.value;
				this[action] && this[action](value);
			},
			changeattr: function(res) {
				var that = this;
				that.attr.cartAttr = res;
			},
			ChangeCartNum: function(res) {
				var that = this;
				that.attr.productSelect.cart_num = 1;
				that.cartNum = 1;
				uni.showToast({
					title: "每人每次限购1" + that.storeInfo.unitName,
					icon: "none",
					duration: 2000
				});
			},
			//选择属性；
			ChangeAttr: function(res) {
				// 修改了规格
				let productSelect = this.productValue[res.value];
				if (productSelect) {
					this.attr.productAttr[res.indexw].index = res.indexn;
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.pinkPrice);
					this.$set(this.attr.productSelect, "stock", productSelect.pinkStock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", res.value);
					this.$set(this, "attrTxt", "已选择");
				} else {
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.pinkPrice);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "请选择");
				}
			},

			openTeam: function() {
				var that = this;
				if(!this.userInfo.status){
					systemPrompt()
					return
				}
				if (this.userInfo.uid != 666) {
					if (this.userInfo.spreadUid == 0) {
						uni.showToast({
							title: "该用户没有上级无法购买商品，请扫描推广二维码注册用户再购买",
							icon: "none",
							duration: 3000,
						});
						return;
					}
				}

				if (this.userInfo.phone == '') {
					uni.showToast({
						title: "您还未绑定手机，请前往个人中心绑定手机再购买",
						icon: "none",
						duration: 3000,
					});
					return;
				}
				var data = {};
				data.productId = that.storeInfo.productId;
				data.cartNum = that.attr.productSelect.cart_num;
				data.uniqueId = that.attr.productSelect.unique;
				data.combinationId = that.storeInfo.id;
				data.new = 1;
				postCartAdd(data)
					.then(res => {
						that.$yrouter.push({
							path: "/pages/order/OrderSubmission/index",
							query: {
								id: res.data.cartId
							}
						});
					})
					.catch(err => {
						uni.showToast({
							title: err.msg || err.response.data.msg || err.response.data.message,
							icon: "none",
							duration: 2000
						});
					});
			},
			//打开属性插件；
			selecAttrTap: function() {
				this.attr.cartAttr = true;
				this.isOpen = true;
			},
		}
	};
</script>
<style lang="less">
	.noscroll {
		height: 100%;
		overflow: hidden;
	}

	.ActivityTips {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
		padding-top: 80rpx;

		image {
			height: 400rpx;
			width: 400rpx;
			display: block;
			margin: 0 auto;
		}
	}

	.product-con {
		.wrapper {
			padding-bottom: 0.26 * 100rpx;
			margin-bottom: 0;

			.share {
				height: 160rpx;
				position: relative;
				margin: 0;
				background-color: #ff3334;

				.title {
					position: absolute;
					top: 0;
					left: 0;
					color: #FFFFFF;
					font-size: 32rpx;
					padding: 20rpx 0 0 30rpx;
				}

				.money {
					color: #ffffff;
					padding-left: 40rpx;
					padding-bottom: 20rpx;
					font-weight: 400;
				}

				.countDown {
					height: 160rpx;
					width: 60%;
					position: absolute;
					top: 0;
					right: 0;

					.timeName {
						display: block;
						text-align: right;
						padding-right: 60rpx;
						margin-top: 20rpx;
						margin-bottom: 25rpx;
						color: #FFFFFF;
					}

					.font-style {
						margin-top: 60rpx;
						font-size: 38rpx;
					}

					.time {
						text-align: right;
						padding-right: 30rpx;
						font-size: 28rpx;

						.styleAll {
							background-color: #000000;
							padding: 4rpx 10rpx;
							border-radius: 10rpx;
							color: #FFFFFF;
						}

						.timeTxt {
							color: #000000;
							margin: 0 5rpx;
						}
					}
				}
			}
		}

		.footer {
			background-color: inherit;
			padding: 0 50rpx;

			.bnt {
				width: 100%;

				.buyback {
					background: #7A7A7A;
				}

				view {
					width: 100%;
					border-radius: 80rpx;
					height: 80rpx;
					line-height: 80rpx;
					box-shadow: 2rpx 2rpx 20rpx #ccc;
				}
			}
		}

		.condition {
			height: 300rpx;
			width: 100%;
			position: relative;
			background-color: #FFFFFF;

			.text {
				font-size: 30rpx;
				color: #222222;
				padding: 30rpx;

				.remainder {
					font-size: 40rpx;
					color: #ff3334;
					font-weight: bold;
					margin: 0 10rpx;
				}

				.selfCount {
					font-size: 40rpx;
					color: #ff3334;
					font-weight: bold;
					margin: 0 10rpx;
				}

				.totalSum {
					font-size: 40rpx;
					color: #ff3334;
					font-weight: bold;
					margin: 0 10rpx;
				}
			}

			.userView {
				height: 100rpx;
				width: 100%;
				padding: 25rpx 30rpx 0 30rpx;

				.View-pinkOkSum {
					height: 80rpx;
					line-height: 80rpx;
					margin-left: 20rpx;
					float: left;
					color: #666;
				}

				.userNone {
					border: dashed #ff3334 1rpx;
					text-align: center;
					line-height: 70rpx;
					font-size: 55rpx;
				}

				.item:nth-child(1) {
					margin-left: 0;
				}

				.item {
					height: 80rpx;
					width: 80rpx;
					border-radius: 100%;
					overflow: hidden;
					margin-left: -40rpx;
					float: left;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.spillOver {
					height: 80rpx;
					width: 80rpx;
					float: left;
					border-radius: 100%;
					margin-left: -40rpx;
					background-color: #FFFFFF;
					line-height: 61rpx;
					text-align: center;
					color: #ff3334;
				}
			}

			.SelfPurchase {
				height: 80rpx;
				width: 370rpx;
				color: #FFFFFF;
				text-align: center;
				border: #ffffff solid 1rpx;
				border-radius: 10rpx;
				line-height: 80rpx;
				position: absolute;
				top: 40rpx;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}

			.teamBnt {
				position: absolute;
				right: 50rpx;
				height: 70rpx;
				bottom: 50rpx;
				width: auto;
				display: inline-block;
				line-height: 70rpx;
				padding: 0 60rpx;
				font-size: 28rpx;
				border-radius: 60rpx;
				color: #FFFFFF;
			}


		}

		.noneBgColor {
			background-color: rgba(0, 0, 0, 0.3);
		}

		.purchasedUser {
			height: 150rpx;
			background-color: #ffffff;
			border-bottom: #e8e8e8 solid 10rpx;
			border-top: #e8e8e8 solid 10rpx;
		}

		.playWay {
			margin-top: 0;

			.way {
				.explain {
					margin-top: 20rpx;
					font-size: 28rpx;
					color: #ff3334;
				}
			}
		}

		.footer-group {
			button {
				border: 0;
				background: none;
			}

			.bnt {
				width: 43%;
			}

			.bnt.bg-color-violet {
				background-color: #fa8013;
			}
		}

		.share_view_bg {
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.7);
			z-index: 100;
			position: fixed;
			top: 0;
		}

		.share_view {
			position: fixed;
			bottom: 0;
			background-color: #FFFFFF;
			height: 400rpx;
			width: 100%;
			z-index: 101;
			overflow: hidden;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			
			.title {
				height: 100rpx;
				width: 100%;
				position: relative;
				line-height: 100rpx;
				text-align: center;
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			
				.iconfont {
					position: absolute;
					right: 50rpx;
					top: 0rpx;
					font-size: 34rpx;
				}
			}
			
			.contert{
				display: table;
				width: 100%;
				height: 250rpx;
				table-layout: fixed;
				margin-top: 50rpx;
				.item{
					text-align: center;
					display: table-cell;
					line-height: 1;
					background-color: none !important;
					background: none !important;
					image{
						height: 120rpx;
						width: 120rpx;
					}
					text{
						display: block;
						text-align: center;
						margin-top: 20rpx;
					}
				}
				button::after{
					border-top-width: 0;
					border-left-width: 0;
					border-bottom-width: 0;
					border-right-width: 0;
				}
			}
		}
	}
	
	
	.product-con .showModalAtive {
		transform: translate3d(0rpx, 0rpx, 0rpx);
		transition-duration: 0.5s;
	}
	
	.product-con .hideModal {
		transform: translate3d(0rpx, 400rpx, 0rpx);
		transition-duration: 0.5s;
	}
</style>
